import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  TouchableOpacity,
  TextInput
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';
import { Images } from '../../../../public/images/images';


export default class selectcontact extends Component {
  constructor(props) {
    super(props)
    this.state = {

    };
  }

  componentDidMount = () => {


  }

  // 选中联系人
  selectClick(index) {
    const {
      DATA
    } = this.state
    DATA.map(item => {
      item.data.map((item, _index) => {
        if (index == _index) {
          this.setState({
            flag: (item.flag = !item.flag)
          })
        }
      })
    })
  }
  render() {
    const {
      DATA,
      headerRightImage
    } = this.state
    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={'选择联系人'}
          rightImage={headerRightImage}
          titleColor={"#333"}
        />
        <View>
          <View style={styles.bodys}>
            <TextInput style={styles.input}
              inlineImageLeft='sou'
              inlineImagePadding={40}
              placeholder='搜索用户' />
          </View>
          {/* 联系人列表 */}
          <ScrollView>
            {DATA.map((item, index) => {
              return (
                <View key={index}>
                  <View style={styles.body_fenzu}>
                    <Text style={styles.fenzu_titles}>{item.title}</Text>
                  </View>
                  {item.data.map((item, index) => {
                    return (
                      <TouchableOpacity
                        onPress={() => {
                          this.selectClick(index)
                        }}
                        key={index} style={styles.bodys}>
                        <View style={styles.body_data}>
                          {/* 判断是否选中 */}
                          <View style={item.flag ?
                            styles.data_checkbox : styles.data_checkbox2}>
                            <Image style={styles.checkbox_img}
                              source={require("../../../../assets/images/iconResources/selectTheHook.png")} />
                          </View>
                          <View style={styles.data_view}>
                            <Image source={item.url} />
                            <View>
                              <Text style={styles.data_list}>{item.name}</Text>
                              <Text style={styles.data_list2}>
                                职业：{item.zhiye}
                              </Text>
                            </View>
                          </View>
                        </View>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              );
            })}
          </ScrollView>
        </View>

      </View>
    )
  }
}
const styles = StyleSheet.create({
  padlrWarper: {
    backgroundColor: '#fff'
  },
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent',
  },
  bodys: {
    padding: 15
  },
  input: {
    backgroundColor: '#C4C4C440',
    borderRadius: 6,
    paddingLeft: 15
  },
  body_fenzu: {
    marginVertical: 10,
    backgroundColor: '#C4C4C424',
    paddingLeft: 10,
    padding: 5,
  },
  fenzu_titles: {
    color: 'rgba(0, 0, 0, 0.32)',
  },
  body_data: {
    display: 'flex',
    flexDirection: 'row',
    paddingLeft: 5,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
    padding: 5,
    justifyContent: 'flex-start'
  },
  data_view: {
    display: 'flex',
    flexDirection: 'row',
    marginLeft: 10,
  },
  data_list: {
    color: 'black',
    paddingLeft: 20,
    fontSize: 20,
  },
  data_list2: {
    color: 'black',
    paddingLeft: 20,
    padding: 6,
  },
  data_checkbox: {
    borderRadius: 20,
    width: 22,
    height: 22,
    marginTop: 15,
    backgroundColor: '#1890FF',
  },
  data_checkbox2: {
    borderWidth: 1,
    borderRadius: 20,
    width: 22,
    height: 22,
    marginTop: 15,
    borderColor: '#B1B1B1'
  },
  checkbox_img: {
    marginTop: 5,
    alignSelf: 'center'
  }
})